<template>
	<div class="seckill_w">
    <div class="bg_title">今日{{seckillData.title}}</div>
    <div class="seckill" ref="seckill_scroll">  
      <div class="seckill_list" @click="seckill_href(seckillData.h5_url)">
        <div class="seckill_item" v-for="(item,index) of seckillData.data" :key="index" >
          <div class="img">
            <img v-lazy="item.img_url" alt="">
            <span class="time">{{item.ms_string}}</span>
          </div>
          <div class="title">{{item.product_name}}</div>
          <div class="price">秒杀价
            <span>&yen;{{item.sale_price}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default{
	name:'seckill',
	data(){
		return{
			
		}
	},
	props:{
		seckillData:Object
	},
	components:{
		
	},
	created(){
		this.creatScroll()
	},
	methods:{
		seckill_href(e){
      window.location.href = e
    },
    creatScroll(){
      this.$nextTick(() => {
        if(!this.scroll){
          this.scroll=new BScroll(this.$refs.seckill_scroll,{scrollX: true,scrollY: false})
        }else{
          this.scroll.refresh()
        }
      })
    }
	}
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/varibles.styl'
.seckill_w{background:#f3e7d6;}
.seckill{width:100%;overflow:hidden;}
.bg_title{width:100%;overflow:hidden;text-align:center;font-size:0.33rem;color:#df4b53;padding-top:0.2rem;}
.seckill_list{white-space: nowrap;display: inline-block;padding:0.2rem;}
.seckill_item{width:2.8rem;display: inline-block;background:$bgColor;padding-bottom:0.2rem;margin-left:0.2rem;}
.seckill_item:nth-child(1){margin-left:0;}
.seckill_item .img{width:100%;overflow:hidden;position:relative;height:0;padding-bottom:100%; }
.seckill_item .img img{width:100%;}
.seckill_item .img .time{position:absolute;left:0;top:2rem;z-index:2;font-size:0.2rem;color:#fff;background:#df4b53;border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;display:inline-block;padding:0.08rem 0.18rem 0.05rem 0.1rem; }
.title{height:0.6rem;line-height:0.3rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size:0.2rem;color:#363636;font-weight:normal;white-space:normal;padding:0 0.1rem;}
.price{padding:0 0.1rem;font-size:0.2rem;color:#df4b53;margin-top:0.1rem;}
.price span{display:inline-block;font-size:0.3rem;}
</style>